<template>
    <div class="container">
        <Alert>
            <span class="alert">温馨提示：由于数据量比较大，只能查询历史数据，无法查询当天数据。给您带来的不便，敬请谅解。</span>
        </Alert>
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Select v-model="searchObj.place_type" placeholder="请选择场所类别" clearable filterable
                            style="width: 250px">
                        <Option v-for="item in placeTypeList"
                                :value="item.value"
                                :key="item.value">{{ item.name }}
                        </Option>
                    </Select>
                </FormItem>
                <!--                <FormItem>-->
                <!--                    <Select v-model="searchObj.code" placeholder="请选择机构" clearable filterable style="width: 250px">-->
                <!--                        <Option v-for="item in organizationList"-->
                <!--                                :value="item.code"-->
                <!--                                :key="item.code">{{ item.name }}-->
                <!--                        </Option>-->
                <!--                    </Select>-->
                <!--                </FormItem>-->
                <FormItem>
                    <DatePicker v-model="statsTime" type="datetimerange" format="yyyy-MM-dd"
                                placeholder="请选择统计时间段" style="width: 300px"></DatePicker>
                </FormItem>
                <!--                <FormItem>-->
                <!--                    <Button class="search-btn" type="primary" @click="init">-->
                <!--                        <Icon type="ios-search"/>-->
                <!--                        查询-->
                <!--                    </Button>-->
                <!--                </FormItem>-->
                <FormItem>
                    <Button class="search-btn" type="primary" @click="officeQrCodeAction" :loading="searchBtnDisable">
                        <Icon type="ios-search"/>
                        统计所有机构
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <div>
            <Divider/>
            <div class="title">
                <h3>当前机构和机构编号：{{getCompanyCodeAndName}}</h3>
            </div>
        </div>
        <Row type="flex" justify="space-between" :gutter="20">
            <Col span="8">
                <Card class="card1">
                    <div style="text-align:center">
                        <h2>场所二维码总数</h2>
                        <Divider/>
                        <h1 class="number1">{{ercodetotal}}</h1>
                    </div>
                </Card>
            </Col>
            <Col span="16">
                <Card class="card2">
                    <div style="text-align:center">
                        <h2>扫码总数</h2>
                        <Divider/>
                        <h1 class="number">{{codetotal}}</h1>
                    </div>
                </Card>
            </Col>
        </Row>
        <div>
            <Divider/>
            <Progress v-if="showProgress" :percent="percentData" :stroke-color="['#108ee9', '#87d068']"
                      :stroke-width="2"/>
            <vxe-toolbar export custom></vxe-toolbar>
            <vxe-table
                    border
                    show-overflow
                    highlight-hover-row
                    export-config
                    height="400"
                    :loading="tableloading"
                    :align="allAlign"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData">
                <vxe-table-column type="seq" width="70"></vxe-table-column>
                <vxe-table-column field="name" title="机构名称" width="280" sortable></vxe-table-column>
                <vxe-table-column field="ercodetotal" title="二维码总数" width="130"></vxe-table-column>
                <vxe-table-column title="获取状态" width="420">
                    <template v-slot="{ row }">
                        <Button type="warning" ghost :loading="row.loading1" @click="buttonAction(row,1)"
                                :disabled="row.dis1">{{row.btn1_title}}
                        </Button>&nbsp;
                        <Button type="warning" ghost :loading="row.loading2" @click="buttonAction(row,2)"
                                :disabled="row.dis2">{{row.btn2_title}}
                        </Button>&nbsp;
                        <Button type="warning" ghost :loading="row.loading3" @click="buttonAction(row,3)"
                                :disabled="row.dis3">{{row.btn3_title}}
                        </Button>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="codetotal" title="扫码总数" min-width="130"></vxe-table-column>
            </vxe-table>
        </div>
    </div>
</template>

<script>
import {
  // updatePlaceURL,
  companyCodeQrCodeStatistics, findOfficeXJList
  // deletePlace,
  // getPlaceCount
} from '@/api/pass'
import { formatDate } from '@/components/dateFormat'
import dict from '@/libs/dict'

export default {
  components: {},
  data () {
    return {
      percentData: 0,
      showProgress: false,
      tableloading: false,
      allAlign: 'center',
      show: false,
      codetotal: 0,
      ercodetotal: 0,
      modalShow: false,
      modalTitle: '',
      modalType: '',
      modalData: {},
      tableData: [],
      selectData: [],
      tempFlag: false,
      searchObj: { code: this.$store.state.user.severUserInfo.data.company_code },
      statsTime: '',
      organizationList: [],
      placeTypeList: dict.placeCategory,
      searchBtnDisable: true
    }
  },
  props: {},
  mounted () {
    this.findOfficeXJList()
  },
  computed: {
    getCompanyCodeAndName () {
      return this.$store.state.user.severUserInfo.data.company_name + '【' + this.$store.state.user.severUserInfo.data.company_code + '】'
    }
  },
  methods: {
    async officeQrCodeAction () {
      this.tableloading = true
      this.codetotal = 0
      this.ercodetotal = 0
      this.showProgress = true
      // let data = []
      let barNum = this.organizationList.length
      for (let i = 0; i < barNum; i++) {
        let item = this.organizationList[i]
        let pushData = {
          code: item.code,
          name: item.name,
          btn1_title: '加载中...',
          btn2_title: '加载中...',
          btn3_title: '加载中...',
          ercodetotal: 0,
          total1: 0,
          total2: 0,
          total3: 0,
          codetotal: 0,
          dis1: true,
          dis2: true,
          dis3: true,
          loading1: false,
          loading2: false,
          loading3: false
        }
        const startTime = this.statsTime[0] !== '' ? formatDate(this.statsTime[0], 'yyyy-MM-dd') : ''
        const endTime = this.statsTime[1] !== '' ? formatDate(this.statsTime[1], 'yyyy-MM-dd') : ''
        let param = {
          begin_time: startTime,
          end_time: endTime,
          place_type: this.searchObj.place_type,
          company_code: item.code
        }
        param.type = 1
        this.loading1 = true
        let result1 = await companyCodeQrCodeStatistics(param)
        console.log(result1, '----------1=' + i)
        param.type = 2
        this.loading1 = true
        let result2 = await companyCodeQrCodeStatistics(param)
        console.log(result1, '----------2=' + i)
        param.type = 3
        this.loading1 = true
        let result3 = await companyCodeQrCodeStatistics(param)
        console.log(result1, '----------3=' + i)
        if (!this.$common.xeUtils.isEmpty(result1) && result1.data.errcode === '200') {
          this.tableloading = false
          pushData.ercodetotal = result1.data.data.qrTotal
          pushData.loading1 = false
          pushData.dis1 = true
          pushData.total1 = result1.data.data.scanTotal
          pushData.btn1_title = '数据读取成功'
        } else {
          this.tableloading = false
          pushData.dis1 = false
          pushData.loading1 = false
          pushData.btn1_title = '重新读取数据'
        }
        if (!this.$common.xeUtils.isEmpty(result2) && result2.data.errcode === '200') {
          this.tableloading = false
          pushData.ercodetotal = result2.data.data.qrTotal
          pushData.loading2 = false
          pushData.dis2 = true
          pushData.total2 = result2.data.data.scanTotal
          pushData.btn2_title = '数据读取成功'
        } else {
          this.tableloading = false
          pushData.dis2 = false
          pushData.loading2 = false
          pushData.btn2_title = '重新读取数据'
        }
        if (!this.$common.xeUtils.isEmpty(result3) && result3.data.errcode === '200') {
          this.tableloading = false
          pushData.ercodetotal = result3.data.data.qrTotal
          pushData.loading3 = false
          pushData.dis3 = true
          pushData.total3 = result3.data.data.scanTotal
          pushData.btn3_title = '数据读取成功'
        } else {
          this.tableloading = false
          pushData.dis3 = false
          pushData.loading3 = false
          pushData.btn3_title = '重新读取数据'
        }
        pushData.codetotal = pushData.total1 + pushData.total2 + pushData.total3
        this.codetotal += pushData.codetotal
        this.ercodetotal += pushData.ercodetotal
        this.tableData.push(pushData)
        this.percentData = parseInt(((i + 1) / barNum) * 100)
      }
    },
    all () {
      this.show = true
    },
    exportData () {
      this.$refs.table.exportCsv({
        filename: '场所列表'
      })
    },
    async buttonAction (row, type) {
      const startTime = this.statsTime[0] !== '' ? formatDate(this.statsTime[0], 'yyyy-MM-dd hh:mm:ss') : ''
      const endTime = this.statsTime[1] !== '' ? formatDate(this.statsTime[1], 'yyyy-MM-dd hh:mm:ss') : ''
      let param = {
        type: type,
        begin_time: startTime,
        end_time: endTime,
        place_type: this.searchObj.place_type,
        company_code: row.code
      }
      let result = await companyCodeQrCodeStatistics(param)
      if (result.data.errcode === '200') {
        console.log(result.data.errcode, '225555')
        this.tableloading = false
        row.codetotal += result.data.data.qrTotal
        row['loading' + type] = false
        row['dis' + type] = true
        row['total' + type] = result.data.data.scanTotal
        row['btn' + type + '_title'] = '数据读取成功'
      } else {
        this.tableloading = false
        row['dis' + type] = false
        row['loading' + type] = false
        row['btn' + type + '_title'] = '重新读取数据'
      }
      this.codetotal += result.data.data.qrTotal
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    tableSelectChange (val) {
      this.selectData = val
    },
    findOfficeXJList () {
      this.searchBtnDisable = true
      findOfficeXJList().then(ret => {
        this.searchBtnDisable = false
        const data = ret.data
        if (data.errcode === 0) {
          data.data.forEach(item => {
            this.organizationList.push(item)
          })
          // this.officeQrCodeAction()
        } else {
          this.error(data)
        }
      })
    },
    searchAction () {
      this.init()
    }
  }

}
</script>

<style scoped>
    .container {
        padding-bottom: 50px;
    }

    .title {
        margin-bottom: 20px;
    }

    .number {
        margin-top: 30px;
    }

    .number1 {
        margin-top: 45px;
    }

    .card1 {
        height: 200px;
    }

    .card2 {
        height: 200px;
    }

    .alert{
        color: #ff7c05;
        font-weight: bold;
    }

    .button {
        margin-top: 5px;
    }

    .action-btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .search-input {
        /*width: 180px;*/
    }

    .search-btn {
        /*width: 100px;*/
    }

    /deep/ .ivu-divider-horizontal {
        margin: 12px 0;
    }

    /deep/ .ivu-form-item {
        margin-bottom: 6px;
    }
</style>
